/*
 * @Author: viivLgr 
 * @Date: 2018-06-04 16:53:29 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 15:33:38
 */
import React from 'react';
import { Link } from 'react-router-dom';

import PageTitle from 'component/page-title/index.jsx';
import Pagination from 'util/pagination/index.jsx';
import TableList from 'util/tableList/index.jsx';
import ListSearch from './index-list-search.jsx';

import Product from 'service/product-service.jsx';
import Util from 'util/util.jsx';

import './index.scss';

const _product = new Product();
const _util = new Util();

class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            listType: 'list'
        }
    }
    componentDidMount() {
        this.loadList();
    }
    // 加载商品列表
    loadList() {
        let listParam = {};
        listParam.listType = this.state.listType;
        listParam.pageNum = this.state.pageNum;
        // 如果是搜索的话需要传入搜索类型和搜索关键字
        if(this.state.listType === 'search'){
            listParam.searchType = this.state.searchType;
            listParam.keyword = this.state.searchKeyword;
        }
        // 请求接口
        _product.getProductList(listParam).then(res => {
            this.setState(res);
        }, errMsg => {
            this.setState({
                list: []
            });
            _util.errorTips(errMsg);
        });
    }
    // 搜索
    onSearch(searchType, searchKeyword) {
        let listType = searchKeyword === '' ? 'list' : 'search';
        this.setState({
            listType: listType,
            pageNum: 1,
            searchType: searchType,
            searchKeyword: searchKeyword
        }, () => {
            this.loadList();
        });
        console.log(searchType, searchKeyword);
    }
    onPageNumChange(pageNum) {
        this.setState({
            pageNum: pageNum
        }, () => {
            this.loadList();
        });
    }
    // 产品上下架
    onSetProductStatus(e, productId, currentStatus) {
        let newStatus = currentStatus == 1 ? 2 : 1;
        let confirmTips = currentStatus == 1 ? '确定要下架该商品？' : '确定要上架该商品？';
        if (window.confirm(confirmTips)) {
            _product.setProductStatus({
                productId: productId,
                status: newStatus
            }).then(res => {
                _util.successTips(res);
                this.loadList();
            }, errMsg => {
                _util.errorTips(errMsg);
            });
        }
    }
    render() {
        let tableHeaders = [
            { name: '商品ID', width: '10%' },
            { name: '商品信息', width: '50%' },
            { name: '价格', width: '10%' },
            { name: '状态', width: '15%' },
            { name: '操作', width: '15%' },
        ]
        return (
            <div id="page-wrapper">
                <PageTitle title="商品列表">
                    <div className="page-header-right">
                        <Link to="/product/save" className="btn btn-primary">
                            <i className="fa fa-plus"></i>
                            <span>添加商品</span>
                        </Link>
                    </div>
                </PageTitle>
                <ListSearch onSearch={(searchType, searchKeyword) => this.onSearch(searchType, searchKeyword)} />
                <TableList tableHeaders={tableHeaders}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <tr key={index}>
                                    <td>{item.id}</td>
                                    <td>
                                        <p>{item.name}</p>
                                        <p>{item.subtitle}</p>
                                    </td>
                                    <td>￥{item.price}</td>
                                    <td>
                                        <p>{item.status == 1 ? '在售' : '已下架'}</p>
                                        <button className="btn btn-xs btn-warning" onClick={e => this.onSetProductStatus(e, item.id, item.status)}>{item.status == 1 ? '下架' : '上架'}</button>
                                    </td>
                                    <td>
                                        <Link className="opear" to={`/product/detail/${item.id}`}>详情</Link>
                                        <Link className="opear" to={`/product/save/${item.id}`}>编辑</Link>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </TableList>
                <Pagination
                    current={this.state.pageNum || 1}
                    total={this.state.total || 0}
                    pageSize={this.state.pageSize || 10}
                    onChange={(pageNum) => this.onPageNumChange(pageNum)} />
            </div>
        );
    }
}
export default ProductList;